import React, { Component } from 'react';
import { List, InputItem,Button,Picker } from 'antd-mobile';
import { createForm } from 'rc-form';

class Form extends Component {

  onFocus = (e)=>{
    this.props.brandList();
  }

  submit = () => {
    this.props.form.validateFields((error, value) => {
      console.log(error, value);
      this.props.search(value);
    });
  }

  getBrand = ()=>{
    const {activeBrand,activeSeries} = this.props.store ;
    if(activeBrand==null){
      return ''
    }
    return activeBrand.label+ '/'+ activeSeries.label ;
  }

  onChange = data=>{
    this.props.saveForm(data)
  }

  render() {
    const { getFieldProps } = this.props.form;
    const {activeSeries,formData} = this.props.store ;
    return (
      <div>
        <List renderHeader={() => '价格查询'}>
          <InputItem
            {...getFieldProps('name', {
              initialValue: formData.name,
            })}
            onChange={text=>{
              this.onChange({
                name:text
              })
            }}
            placeholder="请输入姓名"
            type="text"
            style={{ width: '100%', color: 'gray' }}
          >姓名</InputItem>
          <InputItem
            {...getFieldProps('phone',{
              initialValue: formData.phone
            })}
            type="phone"
            placeholder="请输入电话"
            onChange={text=>{
              this.onChange({
                phone:text
              })
            }}
            style={{ width: '100%', color: 'gray' }}
          >电话</InputItem>

          <InputItem
            {...getFieldProps('brand',{
              initialValue: this.getBrand(),
            })}
            style={{ width: '100%', color: 'gray' }}
            type="text"
            editable
            placeholder="请选择品牌车系"
            onFocus={this.onFocus}
          >品牌车系</InputItem>

          <Picker extra="请选择(可选)"
                  data={activeSeries.children}
                  title="车型"
                  {...getFieldProps('category', {
                  })}
                  cols={1}
                  onOk={e => console.log('ok', e)}
                  onDismiss={e => console.log('dismiss', e)}
                  style={{ width: '100%', color: 'gray' }}
          >
            <List.Item arrow="horizontal">车型</List.Item>
          </Picker>
          <Button style={{marginTop:'20px',backgroundColor:'#0090E5',color:'#fff'}} onClick={this.submit}>询价</Button>
        </List>
      </div>
    );
  }
}


const PriceForm = createForm()(Form);
export default PriceForm;
